<template>
  <div v-if="width!=='0%'">
    <div class="move_view_background" v-if="show"></div>
    <div class="move_view"
        :style="{width:!show?'0%':isMax?'100%':width,height:!show?'0%':isMax?'100%':height,opacity:show?'1':'0'}"
        v-if="width!=='0%'">
      <div class="move_view_header">
        <p class="move_view_tit">{{ tit }}</p>
        <div class="move_view_btn">
          <img @click="onClickMax"
              src="https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202106/20210617/1623911282904.png"
              alt="">
          <img @click="onClickClose"
              src="https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202106/20210617/1623911297930.png"
              alt="">
        </div>
      </div>
      <div class="move_view_content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MoveView',
  props: {
    width: {
      type: String,
      default: '80%',
    },
    height: {
      type: String,
      default: '90%',
    },
    show: {
      type: Boolean,
      default: false,
    },
    tit:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      isMax: false,
    }
  },
  methods: {
    onClickClose() {
      this.isMax = false
      this.$emit('closeView')
    },
    onClickMax() {
      this.isMax = !this.isMax
    },
  },
}
</script>

<style scoped>
.move_view {
  opacity: 0;
  width: 0%;
  height: 0%;
  background: rgba(18, 50, 91, 0.95);
  border-radius: 8px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 999;
  transition: 0.5s;
}
.move_view_header {
  width: 100%;
  height: 50px;
  background: linear-gradient(to left top, rgba(4, 54, 103, 0.8), #194483);
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.move_view_tit{
  color: #fff;
  font-size: 16px;
  padding-left: 20px;
}
.move_view_btn{
  height: 20px;
}
.move_view_btn > img {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  cursor: pointer;
  pointer-events: inherit;
  transition: 0.2s;
}
.move_view_btn > img:nth-child(1) {
  width: 15px;
  height: 15px;
  margin-bottom: 3px;
}
.move_view_btn > img:hover {
  transform: scale(1.2);
}
.move_view_content{
  width: 100%;
  height: calc(100% - 50px);
}
.move_view_background{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 25, 29, 0.568);;
  z-index: 999;
}
</style>
